<template>
  <div>
      <div class="title">
          <div class="label">选择时间：</div>
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button type="primary" class="search-btn" icon="el-icon-search" @click="search()"></el-button>
          <el-button type="primary" class="search-btn" icon="el-icon-refresh-left" @click="setGlucose()"></el-button>
        </div>

        <div id="container2"></div>
  </div>
</template>

<script>

import { Line } from '@antv/g2plot';
// import { DualAxes } from '@antv/g2plot';
import {dateFormat} from '../util/utils'
export default {
  props:[],
  components: {
  },
  data() {
    return {
        value: "",
        activeName: "1",
        historyData: [],
        glucose:{},
        startDate: "",
        endDate: "",
        line: null,
    };
  },
  computed: {
  },
  watch: {
  },
  mounted(){
      this.getGlucose();
  },
  created() {
    console.log('test')
  },
  methods: {
    setGlucose(){
      this.getGlucose()
      this.getData()
    },
      getGlucose(){
        this.axios.get("/glucosePresure/list").then(
            response=>{
                this.glucose=response.data[0]
                this.getData()
                console.log('Glucose',response.data[0])
            },error=>{
                console.log('Glucose',error.msg)
            }
        )
      },
      getData() {
        console.log(66)
      this.$http
        .get(
          `/glucosePresurePropHistoryLog/list?deviceName=${this.glucose.deviceName}&startDate=${this.startDate}&endDate=${this.endDate}`
        )
        .then((res) => {

          console.log('gg',res.data)
          
          this.historyData=res.data.map((item)=>{
            return{
              date:item.gmtCreate,
              glucose:item.currentGlucose,
            }
          })
          console.log('his',this.historyData)
          if(this.line){
          this.line.changeData(this.historyData)
        }else{
          this.line = new Line("container2", {
            data: this.historyData,
            xField: "date",
            yField: "glucose",
            meta: {
              glucose: {
                alias: "血糖值",
              },
            },
            yAxis: {
              glucose: {
                min: 0,
              },
            },
            annotations: [
              {
                  type: "text",
                  position: ["min",3.9],
                  content: "血糖值Min",
                  offsetY: -4,
                  style: {
                    textBaseline: "center",
                  },
                },
                {
                  type: "line",
                  start: ["min", 3.9],
                  end: ["max",3.9],
                  style: {
                    stroke: "#F4664A",
                    lineDash: [2, 2],
                  },
                },
                {
                  type: "text",
                  position: ["min",6.1],
                  content: "血糖值Max",
                  offsetY: -4,
                  style: {
                    textBaseline: "center",
                  },
                },
                {
                  type: "line",
                  start: ["min",6.1],
                  end: ["max",6.1],
                  style: {
                    stroke: "#F4664A",
                    lineDash: [2, 2],
                  },
                },
            ]
          });
          this.line.render();
        }   
        });

    },
    search(){
      this.startDate=dateFormat(this.value[0],"yyyy-MM-dd")
      this.endDate=dateFormat(this.value[1],"yyyy-MM-dd")
      this.getData()
    }
  },
};
</script>
<style scoped lang="less">
.detail-data {
  padding: 20px;
}
.title {
  display: flex;
  justify-content: start;
}
.label {
  line-height: 36px;
  margin-right: 20px;
}
.search-btn {
  margin: 0 20px;
}
</style>